import React from 'react';
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import { Page } from 'components'
import { Card, Badge, Table, Divider } from 'antd';
import DescriptionList from 'components/DescriptionList';
import PageHeaderLayout from 'components/Layout/PageHeaderLayout';
import styles from './index.less';
import { financialSettlementStatus, financialBusinessType, financialSettlementApplyHandleType,timeCheckout } from "utils/enumConfig"
import moment from 'moment';

const FinancialSettlementApplyDetails = ({ location, dispatch, financialSettlementApplyDetail, loading }) => {

  const { Description } = DescriptionList;
  let { currentItemDetail } = financialSettlementApplyDetail;
  let loaded = _.isEmpty(currentItemDetail);

  // 处理付款单号和收款单号
  let payOrReceiptNum = "";
  if (currentItemDetail) {
    if (currentItemDetail.receiptNum && currentItemDetail.receiptNum.length > 0 && currentItemDetail.settlementType === "RECEIVABLE") {
      const newNum = currentItemDetail.receiptNum.map(function (item, key, ary) {
        if (key === 0) {
          return item;
        } else {
          return "</br>" + item;
        }

      })
      payOrReceiptNum = newNum.toString();
      payOrReceiptNum.replace(",", "");
    } else {
      payOrReceiptNum = currentItemDetail.paymentBillNum;
    }
  }

  // 处理操作日志->按照创建时间排序
  const handleLogs = _.sortBy(currentItemDetail.handleLogs, (log) => {
    return -log.handleTime;
  });

  const breadcrumbList = [
    {
      title: '财务管理',
      href: '/financialSettlementApply'
    }, {
      title: '财务结算',
      href: '/financialSettlementApply'
    }, {
      title: '查看详情'
    }
  ];

  const logsColumns = [
    {
      title: '操作人',
      dataIndex: 'handlerName',
      key: 'handlerName',
      render: (text, record, index) => (record.handlerName)
    }, {
      title: '操作时间',
      dataIndex: 'handleTime',
      key: 'handleTime',
      render: (text, record, index) => (timeCheckout(moment(record.handleTime).format("YYYY-MM-DD HH:mm:ss")))
    }, {
      title: '操作类型',
      dataIndex: 'handleType',
      key: 'handleType',
      render: (text, record, index) => (financialSettlementApplyHandleType[record.handleType])
    }
  ];

  return (
    <PageHeaderLayout title="结算申请详情页" breadcrumbList={breadcrumbList}>
      {!loaded && <Card className={styles.card} bordered={false}>
        <DescriptionList
          size="large"
          title="结算申请信息"
          style={{
            marginBottom: 32
          }}>
          <Description term="单据编号">{currentItemDetail.orderId}</Description>
          <Description term="商家">{currentItemDetail.financialAccountName}</Description>
          <Description term="下单人">{currentItemDetail.creatorName}/{currentItemDetail.creatorMobile}</Description>
          <Description term="业务类型">{financialBusinessType[currentItemDetail.businessType]}</Description>
          <Description
            term={currentItemDetail.settlementType == 'PAYABLE'
              ? '应付金额'
              : '应收金额'}>{currentItemDetail.settlementMoney.toFixed(2)}</Description>
          <Description term="创建时间">{timeCheckout(moment(currentItemDetail.createTime).format("YYYY-MM-DD HH:mm:ss"))}</Description>
          <Description term="结算状态">{financialSettlementStatus[currentItemDetail.settlementStatus]}</Description>
        </DescriptionList>
        <Divider style={{
          marginBottom: 32
        }} /> {currentItemDetail.settlementStatus != "NULL" && (
          <div>
            <DescriptionList
              size="large"
              title="结算信息"
              style={{
                marginBottom: 32
              }}>
              < Description term={currentItemDetail.settlementType === 'PAYABLE' ? '付款单号' : '收款单号'}><div dangerouslySetInnerHTML={{ __html: payOrReceiptNum }} /></Description>
              <Description term="操作人">{currentItemDetail.handlerName}/{currentItemDetail.handlerMobile}</Description>
              <Description term="结算时间">{moment(currentItemDetail.handleTime).format("YYYY-MM-DD HH:mm:ss")==="Invalid date"?"":moment(currentItemDetail.handleTime).format("YYYY-MM-DD HH:mm:ss")}</Description>
            </DescriptionList>
            <Divider
              style={{
                marginBottom: 32
              }} /></div>
        )}
        <div className={styles.title}>操作记录</div>
        <Table
          style={{
            marginBottom: 24
          }}
          pagination={false}
          dataSource={handleLogs}
          columns={logsColumns}
          rowKey="id" />
      </Card>}
    </PageHeaderLayout>
  )
};

export default connect(({ financialSettlementApplyDetail, loading }) => ({ financialSettlementApplyDetail, loading }))(FinancialSettlementApplyDetails)
